<script setup lang="ts">
import HomeCard from '@src/components/HomeCard/index.vue'
import * as Echarts from 'echarts'
import { ConfigStore } from '@src/store/config.store'
import {formatMoney} from "@src/utils/easy"
const progress:any = inject("progress")
const store = ConfigStore()
const echartsRef = ref()
let myChart: Echarts.ECharts
function initEcharts() {
  let option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: 'echarts展示',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['消息数量', '用户数量', '图表数据', '位置信息'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '消息数量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)',
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [140, 232, 101, 264, 90, 340],
      },
      {
        name: '用户数量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)',
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [120, 282, 111, 234, 220, 340],
      },
      {
        name: '图表数据',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)',
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [320, 132, 201, 334, 190, 130],
      },
      {
        name: '位置信息',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 0, 135)',
            },
            {
              offset: 1,
              color: 'rgb(135, 0, 157)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [220, 402, 231, 134, 190, 230],
      },
    ],
  }
  myChart = Echarts.init(echartsRef.value)
  option && myChart.setOption(option)
}
onMounted(() => {
  initEcharts()
  window.addEventListener('resize', () => {
    myChart.resize()
  })
  progress()
  watch(
    () => store.expand,
    () => {
      setTimeout(() => {
        myChart.resize()
      }, 400)
    },
  )
})
</script>
<template>
  <div class="home-wrapper">
    <ElRow class="row-group" :gutter="20" justify="space-between">
      <ElCol :xs="24" :sm="12" :lg="6">
        <HomeCard>
          <template #icon>
            <iEpChatDotRound></iEpChatDotRound>
          </template>
          <template #title> 消息数量 </template>
          <template #desc> {{ formatMoney(232132) }} </template>
        </HomeCard>
      </ElCol>
      <ElCol :xs="24" :sm="12" :lg="6">
        <HomeCard>
          <template #icon>
            <iEpAvatar></iEpAvatar>
          </template>
          <template #title> 用户数量 </template>
          <template #desc> {{ formatMoney(66666) }} </template>
        </HomeCard>
      </ElCol>
      <ElCol :xs="24" :sm="12" :lg="6">
        <HomeCard>
          <template #icon>
            <iEpTrendCharts></iEpTrendCharts>
          </template>
          <template #title> 图表数据 </template>
          <template #desc> {{ formatMoney(1233212) }} </template>
        </HomeCard>
      </ElCol>
      <ElCol :xs="24" :sm="12" :lg="6">
        <HomeCard>
          <template #icon>
            <iEpLocation></iEpLocation>
          </template>
          <template #title> 位置信息 </template>
          <template #desc> {{ formatMoney(99) }} </template>
        </HomeCard>
      </ElCol>
    </ElRow>
    <div class="echarts-wrapper">
      <div class="echarts" ref="echartsRef"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-wrapper {
  .row-group {
    margin-bottom: 20px;
  }
  .echarts-wrapper {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    overflow-y: hidden;
    border-radius: 5px;
    height: 400px;

    .echarts {
      overflow-x: hidden;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
